<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { TreeObject } from '../type/index';
import { Search2 as NutIconSearch2, Horizontal as NutIconHorizontal } from '@nutui/icons-vue-taro';
import { ASSET_TYPE_TREE_QUERY } from '/@/api/modules/equipment/asset-type';

const emits = defineEmits<{
  /**
   * @param searchValue 搜索输入框中value
   * @param searchRegion 搜索区域过滤
   * @param searchType 搜索类型过滤
   */
  (e: 'change', searchValue: string, searchRegion: string, searchType: string): void;
}>();

/**
 * 搜索相关项
 */
const filter = reactive<{
  /**
   * 筛选过滤项
   */
  filterItemList: {
    name: string;
  }[];
  /**
   * 资产类型树
   */
  assetTypeList?: TreeObject[];
  /**
   * 资产名称（查询资产）
   */
  searchValue: string;
  /**
   * 区域id（查询区域）
   */
  searchRegion: string;
  /**
   * 资产类型id(查询资产类型)
   */
  searchType: string;
  /**
   * 筛选提示框是否显示
   */
  filterItemVisible: boolean;
  /**
   *筛选类型提示框是否显示
   */
  filterTypeVisible: boolean;
  /**
   * 区域过滤
   */
  appRegionListSelectorPopupIsShow: boolean;
}>({
  filterItemList: [{ name: '全部' }, { name: '按区域筛选' }, { name: '按分类筛选' }],
  assetTypeList: [],
  searchValue: '',
  searchRegion: '',
  searchType: '',
  filterItemVisible: false,
  filterTypeVisible: false,
  appRegionListSelectorPopupIsShow: false,
});

/**
 *点击筛选图标，弹出选择窗口
 */
function displayPopup() {
  filter.filterItemVisible = !filter.filterItemVisible;
  filter.filterTypeVisible = false;
}
/**
 *筛选项选择回调
 */
function filterItemChoose(_: unknown, index: number) {
  switch (index) {
    case 0: //全部
      filter.searchRegion = '';
      filter.searchType = '';
      refreshList();
      break;
    case 1: //区域过滤
      filter.searchType = '';
      filter.appRegionListSelectorPopupIsShow = true;
      break;
    case 2: //类型过滤
      filter.searchRegion = '';
      filter.filterTypeVisible = true;
      break;
  }
}

/**
 * 资产类型确认回调
 * @param param0 选中项的value集合
 */
function assetTypeConfirm({ selectedValue }) {
  filter.searchType = selectedValue[selectedValue.length - 1];
  filter.filterTypeVisible = false;
  refreshList();
}

/**
 * 关键字搜索回调
 */
function search() {
  refreshList();
}
/**
 * 选择过滤条件,触发的事件
 */
function refreshList() {
  emits('change', filter.searchValue, filter.searchRegion, filter.searchType);
}

/**
 * 查询资产分类
 * @param page
 * @param pageSize
 */
function queryAssertTypeList(page: number = 1, pageSize: number = 1000) {
  ASSET_TYPE_TREE_QUERY({ comQuery: { page, pageSize } }).then((res) => {
    filter.assetTypeList = convertTreeObject(res.content);
  });
}

/**
 * tree结构数据转化另一种tree结构数据
 * nut-picker需要tree结构展示数据
 * 递归实现
 */
function convertTreeObject(list?: AssetTypeTreeList.Dto[]) {
  //递归出口
  if (!list || list.length === 0) {
    return;
  }

  const newList: TreeObject[] = [];
  list.map((item) => {
    newList.push({
      text: item.assetTypeName,
      value: item.id,
      children: convertTreeObject(item.assetTypeDto),
    });
  });
  return newList;
}

/**
 * 页面挂载时候，加载请求
 */
onMounted(() => {
  queryAssertTypeList();
});
</script>
<template>
  <view>
    <nut-searchbar
      v-model="filter.searchValue"
      @search="search"
      placeholder="请输入设备名称/设备编号"
      input-background="#EAEBED"
      class="device-account-search__search"
    >
      <template v-slot:leftin>
        <nut-icon-search2 />
      </template>
      <template v-slot:rightout>
        <view class="device-account-search__filter" @click="displayPopup">
          <nut-icon-horizontal />
          <text id="popId">&nbsp;筛选</text>
        </view>
        <nut-popover
          v-model:visible="filter.filterItemVisible"
          :list="filter.filterItemList"
          location="bottom-end"
          targetId="popId"
          @choose="filterItemChoose"
        >
        </nut-popover>
      </template>
    </nut-searchbar>
    <nut-popup position="bottom" v-model:visible="filter.filterTypeVisible">
      <nut-picker
        :columns="filter.assetTypeList"
        title="按分类筛选"
        @confirm="assetTypeConfirm"
        @cancel="filter.filterTypeVisible = false"
      >
      </nut-picker>
    </nut-popup>
    <app-region-list-selector-popup
      v-model="filter.appRegionListSelectorPopupIsShow"
      @on-selected="
        (value) => {
          filter.searchRegion = value;
          refreshList();
        }
      "
    />
  </view>
</template>
<style lang="scss">
.device-account-search {
  &__wrapper {
    padding: 0 20px;
  }
  &__search {
    --nut-searchbar-input-border-radius: 8px;
  }
  &__filter {
    display: inline-flex;
    align-items: center;
  }
}
</style>
